<template>
  <div>
    <div class="header-box">
      <div class="back-button" @click="checkForBack" v-show="index"></div>
      <div class="right-text">
        {{ headerName }}
      </div>
    </div>
    <v-confirm ref="myConfirm" @userBehavior="userBehaviorFun"></v-confirm>
  </div>
</template>
<script>
  import Confirm from '@/components/confirm'
  import { bus } from '../utils/bus'
  export default {
    name: "headers",
    components: {
      'v-confirm': Confirm
    },
    data() {
      return {
        index: true,
        flash: require('../assets/loff.png'),
        activeFlash: false
      }
    },
    props: [
      'headerName',
      'orderList'
    ],
    mounted() {
      // 判断路由，如果不是首页的话则隐藏返回按钮
      if (this.$route.path === '/' || this.$route.path === 'Index') {
        this.index = false
      } else {
        this.index = true
      }
    },
    methods: {
      flashSwitch() {
        bus.$emit('flashActive', this.activeFlash)
        if (this.activeFlash) {
          this.activeFlash = false
          this.flash = require('../assets/loff.png')
        } else {
          this.activeFlash = true
          this.flash = require('../assets/lon.png')
        }
      },
      /**
       * 用户点击返回按钮
       */
      userBehaviorFun(type) {
        if (type !== 'clickCancel') {
          this.$router.go(-1)
        }
      },
      /**
       * 判断是否返回上一页
       **/
      checkForBack() {
        if (this.orderList.length !== 0) { // 如果运单数量的件数不是0,有数据的情况
          this.$refs.myConfirm.show('表单内有未提交保存的运单数据', {
            type: 'confirm',
            cancelText: '取消',
            confirmText: '确定',
            titleText: '是否返回首页?',
            data: this.orderList
          })
        } else { // 没有数据的处理
          this.$router.go(-1)
        }
      },
      /**
       * 返回首页
       */
      backToHome() {
        if (this.orderList.length !== 0) { // 如果运单数量的件数不是0,有数据的情况
        } else { // 没有数据的处理
          this.$router.go(-1)
        }
      }
    }
  }
</script>
<style scoped></style>